<template>
  <div>
    <el-input v-show="showStatus" v-model="pUid" @focus="toggleComponent" />
    <el-tree v-show="!showStatus" :props="props" :data="treeData" @check-change="treeChange" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      pUid: '123123',
      showStatus: true,
      props: {
        children: 'child',
        label: 'name'
      },
      treeData: [
        {
          id: '1',
          uid: 'aaa',
          pUid: '',
          name: '系统管理',
          icon: 'el-icon-setting',
          type: '1',
          status: '1',
          page: '',
          remark: '',
          created: '',
          updated: '',
          // "hasChildren": true,
          child: [
            {
              id: '2',
              uid: 'bbb',
              pUid: 'aaa',
              name: '接口管理',
              type: '1',
              page: '/systemManage/apiManage',
              remark: '',
              created: '',
              updated: '',
              child: []
            },
            {
              id: 3,
              uid: 'bbb',
              pUid: 'aaa',
              name: '菜单管理',
              type: '1',
              page: '/systemManage/menuMange',
              remark: '',
              created: '',
              updated: '',
              child: []
            }
          ]
        }
      ]
    }
  },
  methods: {
    toggleComponent() {
      this.showStatus = !this.showStatus
    },
    treeChange(obj, nodeStatus, otherNode) {
      console.log(obj, nodeStatus, otherNode)
    }
  }
}
</script>

<style lang="scss" scoped></style>
